<template>
  <div>
    <div>
      <input v-model="name"  placeholder="姓名" />
      <input v-model="address" placeholder="地址" />
      <input v-model="phone" placeholder="手机号" />
      <button @click="addAddress">添加地址</button>
    </div>
    <ul>
      <li v-for="(address, index) in addressList" :key="index">
        <span>姓名: {{ address.name }}</span>
        <span>地址: {{ address.address }}</span>
        <span>手机号: {{ address.phone }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    const name = ref("");
    const address = ref("");
    const phone = ref("");

    const addAddress = () => {
      store.dispatch("addAddress", {
        name: name.value,
        address: address.value,
        phone: phone.value,
      });

      // 清空输入框
      name.value = "";
      address.value = "";
      phone.value = "";
    };

    const addressList = computed(() => {
      return store.getters.getAddressList;
    });

    return {
      name,
      address,
      phone,
      addAddress,
      addressList,
    };
  },
};
</script>
